{extend name="layout/layout" /}


{block name="style"}
	<style>
		body, .mui-content{
			background: #1F4B5F;
			color: #B2B3B4;
		}

		.account{
			padding-top:30px;
		}

		.account .tips{
			text-align: center;
		}

		.account .mobile{
			text-align: center;
			font-size: 30px;
			color: #fff;
			margin-top: 40px;
		}


		.keyboard{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			background: #081F3F;
			color: #B2B3B4;
		}

		.keyboard .title{
			text-align: center;
			line-height: 40px;
			display: flex;
			justify-content: center;
		}

		.keyboard .title a{
			flex: 1;
			display: block;
		}

		.keyboard .number-box{
			display: flex;
			flex-wrap: wrap;
			border-top: 1px solid #1F4B83;
			border-left: 1px solid #1F4B83;
			justify-content: center;
		}

		.keyboard .item{
			width: 33.33333%;
			text-align: center;
			font-size: 30px;
			line-height: 50px;
			border-right: 1px solid #1F4B83;
			border-bottom: 1px solid #1F4B83;
			color: rgba(0,0,0,0.7);
			color: #B2B3B4;
		}

		.keyboard .item .icon{
			font-size: 30px;
		}

		.keyboard .item .icon-dianhua{
			font-size: 40px;
		}
	</style>
{/block}

{block name="main"}
	<div class="account" v-cloak>
		<div class="tips">请输入呼叫号码</div>
		<div class="mobile">{{mobile}}</div>

		<div class="keyboard ">
			<div class="title">
				<a href="{:url('call/contact')}">联系人</a>
				<a href="{:url('call/callList')}">通话记录</a>
			</div>
			<div class="number-box">
				<div class="item" @tap="inputNumber(1)">1</div>
				<div class="item" @tap="inputNumber(2)">2</div>
				<div class="item" @tap="inputNumber(3)">3</div>
				<div class="item" @tap="inputNumber(4)">4</div>
				<div class="item" @tap="inputNumber(5)">5</div>
				<div class="item" @tap="inputNumber(6)">6</div>
				<div class="item" @tap="inputNumber(7)">7</div>
				<div class="item" @tap="inputNumber(8)">8</div>
				<div class="item" @tap="inputNumber(9)">9</div>
				<div class="item" @tap="inputNumber(0)">0</div>
				<div class="item" @tap="callPhone"><i class="icon iconfont icon-dianhua text-success"></i></div>
				<div class="item" @tap="delNumber"><i class="icon iconfont icon-huitui"></i></div>
			</div>
		</div>
	</div>
{/block}
{block name="navbar"}{/block}
{block name="script"}
	<script>
		var myVue = new Vue({
			el:'.account',
			data:{
				mobile: ''
			},
			mounted: function(){
				if(!token){
					this.login();
				}

			},
			methods: {
				//输入号码
				inputNumber: function(n) {
					var mobile = String(this.mobile);
					if(mobile.length < 11) {
						this.mobile = mobile+n;
					}
				},

				//拨打电话
				callPhone: function(){
					var mobile = this.mobile;
					if(!mobile) {
						mui.toast('请手机号码');return;
					}

					var preg = /^1\d{10}$/;
					if(!preg.test(mobile)) {
						mui.toast('手机号码格式不正确');return;
					}


					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'call/dial';
					var that = this;
					request(that, {'url': url, 'data': {'callee': mobile}}, function(res){
						layer.closeAll();
						mui.alert(res.msg)
					});

				},

				//删除号码
				delNumber: function(){
					var mobile = String(this.mobile);
					this.mobile = mobile.substr(0, mobile.length-1);
				},

				login:function(){
					location.href = '/mobile/user/login';
				}
			}
		});
	</script>
{/block}